<template>
  <div ref="autoHeight" class="autoHeight"  style="height:100%;width:100%">
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: 'autoHeight',
  props: {
    footer: {
      default: 18
    }
  },
  data() {
    return {
      height: 1080,
      width: 1920,
      first: true,
    }
  },
  methods: {
    computedHeight() {
      this.$nextTick(() => {
        let autoHeight = this.$refs.autoHeight
        if (autoHeight) {
          let innerHeight = window.innerHeight - autoHeight.getBoundingClientRect().top
          if (this.first) {
            this.deleteParentCard15PX()
          }
          this.height = innerHeight > 250 ? innerHeight - this.footer : 250
          autoHeight.style.height = this.height + 'px'
          this.width = window.innerWidth - (autoHeight.getBoundingClientRect().left + 10)
        }
      })
    },
    deleteParentCard15PX() {
      let parentNode = this.$refs.autoHeight
      for (let index = 0; index < 3; index++) {
        parentNode = parentNode['parentNode']
        if (!parentNode) {
          return
        }
      }
      let className = parentNode.className.replace('mb-15px', '')
      parentNode.className = className
      this.first = false
    }
  },
  created() {
    this.computedHeight()
    setInterval(() => {
      this.computedHeight()
    }, 310)
  }
}
</script>
<style scoped>
.autoHeight {
  width: 100%;
}
</style>
